<template>
	<view class="amount-fields">
		<view v-for="(item, index) in amountList" :key="index" class="field-item">
			<text class="field-label">{{ item.label }}：</text>
			<text class="field-value">{{ formatCurrency(item.value) }}</text>
		</view>
	</view>
</template>

<script setup lang="ts">
import { computed } from 'vue';

const props = defineProps<{
	totalAmount?: number;
	actualPrice?: number;
	codAmount?: number;
}>();

const amountList = computed(() => [
	{ label: '总金额', value: props.totalAmount || 0 },
	{ label: '已收金额', value: props.actualPrice || 0 },
	{ label: '代收金额', value: props.codAmount || 0 }
]);

const formatCurrency = (value: number) => {
	return `¥${value.toFixed(2)}`;
};
</script>

<style scoped>
.amount-fields {
	font-size: 26rpx;
	color: #666;
}

.field-item {
	display: flex;
	margin-bottom: 8rpx;
}

/* 最后一个项目不加外边距 */
.field-item:last-child {
	margin-bottom: 0;
}

.field-label {
	color: #999;
	font-weight: normal;
}

.field-value {
	color: #333;
	font-weight: 500;
	margin-left: 8rpx;
	display: flex;
	align-items: center;
}

/* 总金额特殊样式 */
.field-item:first-child .field-value {
	color: #e64340;
	font-weight: 600;
}
</style>
